<template>
  <div class="club-details-container">
    <!-- 社团信息展示区 -->
    <el-card class="club-info-card" shadow="hover">
      <h1 class="club-name">{{ clubDetails?.clubName }}</h1>
      <div class="info">
        <el-icon><User /></el-icon>
        <span>人数: {{ clubDetails?.memberCount }}</span>
      </div>
      <div class="tags">
        <el-tag v-for="tag in clubDetails?.tags" :key="tag" type="success">
          {{ getTagText(tag) }}
        </el-tag>
      </div>
      <p class="description">{{ clubDetails?.introduction }}</p>
    </el-card>
    <div class="sub-sections">
      <!-- 社长信息展示区 -->
      <el-card class="section leader-info-card" shadow="hover">
        <p class="leader-name">社长: {{ clubDetails?.userVO.userName }}</p>
        <p>专业: {{ clubDetails?.userVO.major || "未填写" }}</p>
        <p>账号: {{ clubDetails?.userVO.userAccount }}</p>
        <p>联系方式: {{ clubDetails?.userVO.phoneNumber || "未填写" }}</p>
      </el-card>
      <!-- 社团公告展示区 -->
      <el-card class="section announcement-info-card" shadow="hover">
        <p class="announcement-title">
          {{ clubDetails?.clubAnnouncementVo.title }}
        </p>
        <p>{{ clubDetails?.clubAnnouncementVo.content }}</p>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getClubVoByIdAPI } from "@/apis/club";
import { User } from "@element-plus/icons-vue";

const route = useRoute();

interface Club {
  id: number;
  clubName: string;
  userVO: {
    userName: string;
    userAccount: string;
    phoneNumber: string | null;
    major: string | null;
    grade: string | null;
  };
  tags: string[];
  introduction: string;
  memberCount: number;
  clubAnnouncementVo: {
    title: string;
    content: string;
    createTime: string;
    isDelete: string;
  };
}

const clubDetails = ref<Club | null>(null);

const loadClubDetails = async (clubId: number) => {
  try {
    const response = await getClubVoByIdAPI(clubId);
    console.log("API Response:", response); // 打印 API 返回值以调试
    if (response.code === 0 && response.data) {
      clubDetails.value = response.data; // 存储社团详情数据
    } else {
      clubDetails.value = null; // 如果数据为空或格式不正确，设置为 null
      console.error(
        "加载社团详情失败:",
        response.message || "返回数据格式错误"
      );
    }
  } catch (error) {
    clubDetails.value = null; // 如果接口调用失败，设置为 null
    console.error("加载社团详情时发生错误:", error.message || error);
  }
};

onMounted(() => {
  const clubId = Number(route.query.clubId);
  loadClubDetails(clubId);
  console.log("clubId:", clubId);
});
const tagFilters = [
  { text: "学术类", value: "academic" },
  { text: "艺术类", value: "art" },
  { text: "体育类", value: "sports" },
  { text: "公益类", value: "volunteer" },
  { text: "文化类", value: "culture" },
  { text: "娱乐类", value: "recreation" },
  { text: "职业发展类", value: "career" },
  { text: "其他类", value: "other" },
];

const getTagText = (tag: string) => {
  const filter = tagFilters.find((item) => item.value === tag);
  return filter ? filter.text : tag;
};
</script>

<style scoped>
.club-details-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  box-sizing: border-box;
}

.club-info-card {
  background-color: #e0e7ff;
  padding: 20px;
  border-radius: 8px;
  flex: 1;
  position: relative;
}

.club-name {
  font-size: 24px;
  font-weight: bold;
  color: #5c6bc0;
  margin-bottom: 10px;
}

.info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  color: #3f51b5;
}

.tags {
  margin: 10px 0;
}

.description {
  margin: 10px 0;
  color: #3f51b5;
}

.sub-sections {
  display: flex;
  gap: 40px;
  flex: 2;
  padding-top: 40px;
}

.section {
  flex: 1;
  padding: 20px;
  border-radius: 8px;
  position: relative;
}

.leader-info-card {
  background-color: #fce4ec;
}

.announcement-info-card {
  background-color: #e1bee7;
}

.activity-info-card {
  background-color: #d1c4e9;
}

p {
  color: #3f51b5;
}

.actions {
  position: absolute; 
  bottom: 10px; 
  right: 10px; 
  display: flex;
  gap: 10px; 
}
.leader-name {
  font-size: 20px;
  font-weight: bold;
}

.announcement-info-card {
  background-color: #e1bee7;
}

.announcement-title,
.activity-title {
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  color: #5c6bc0;
}
</style>
